<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 600px;
            border: 1px solid;
            margin: auto;
            position: relative;
            font-size: 0;
        }

        li {
            list-style: none;
        }

        ul,
        ol {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            position: absolute;
        }

        ul {

            justify-content: space-between;
            padding: 0 20px;
            top: calc(50% - 25px);
        }

        ul>li {
            width: 49px;
            height: 49px;
            background: url("../img/shutter_prevBtn.png");
        }

        ul>li:hover {
            background-position: 0 -49px;
        }

        ul>li:nth-child(2) {
            transform: rotate(180deg);
        }

        ol {
            top: 90%;
            justify-content: center;

        }

        ol>li {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 50%;
            margin-left: 10px;
        }

        ol>li:hover {
            background-color: #fff;
        }

        ol>li:first-child {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="../img/pug1.jpg" alt="">
        <ul>
            <li id="prevBtn"></li>
            <li id="nextBtn"></li>
        </ul>
        <ol>
            <li data-index="0"></li>
            <li data-index="1"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
        </ol>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        const arr = ['pug1.jpg', 'pug2.jpg', 'pug3.jpg', 'pug4.jpg'];

        let i = 0, timer = null;

        function render() {
            i++;
            if (i > 3) {
                i = 0;
            }
            $('img').attr('src', `../img/${arr[i]}`);
            circleStyle()
        }
        timer = setInterval(render, 1000);

        function renderBack() {
            i--;
            if (i < 0) {
                i = 3;
            }
            $('img').attr('src', `../img/${arr[i]}`);
        }

        $('.container').on({
            mouseenter: function () {
                clearInterval(timer);
            },
            mouseleave: function () {
                timer = setInterval(render, 1000);
            },
            click: function (event) {
                if (event.target.id == 'nextBtn') { // 后一页
                    render()
                }
                if (event.target.id == 'prevBtn') { // 前一页
                    renderBack()
                }
                if (event.target.dataset.index >= 0) {
                    let index = event.target.dataset.index;
                    i = index - 1;
                    render();
                }
            }
        });

        function circleStyle() {
            $('ol>li').css('background-color', 'rgba(255,255,255,0.3)');
            $(`ol>li:eq(${i})`).css('background-color', 'rgba(255,255,255,1)');
        }
    </script>
</body>

</html>